<!--link rel="stylesheet" href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css"-->

<div class="overflow-hidden content-margin container-fluid" style="width: 50%;">

    <form class="form-horizontal" [formGroup]="formGroup">

        <dynamic-bootstrap-form [model]="formModel"
                                [group]="formGroup"
                                (dfBlur)="onBlur($event)"
                                (dfChange)="onChange($event)"
                                (dfFocus)="onFocus($event)">

            <ng-template modelId="bootstrapFormArray" let-context="context" let-index="index">

                <div class="col-sm-4">

                    <button type="button" class="btn btn-danger btn-sm rounded" (click)="remove(context, index)">&#10005;</button>
                    <button type="button" class="btn btn-default btn-sm rounded" (click)="move(context, index, -1)">&#9650;</button>
                    <button type="button" class="btn btn-default btn-sm rounded" (click)="move(context, index, 1)">&#9660;</button>
                    <button type="button" class="btn btn-success btn-sm rounded" (click)="insert(context, index + 1)">&#43;</button>

                </div>

            </ng-template>

        </dynamic-bootstrap-form>

    </form>

    <!--button (click)="test()" type="button">Test</button-->

    <pre>{{formGroup.value | json}}</pre>

</div>